<template>
  <div class="init-container">
    <div class="mask-container" v-if="isMask"></div>
    <div class="progress-header">
      <div class="progress-content">
        <Progress
          :percent="config.percentage"
          :stroke-color="progressColor"
          :stroke-width="12"
          :status="progressStatus"
          text-inside
        />
      </div>

      <div class="progress-summary" v-if="!showDetails">
        {{ config.percentage }}% {{ $srv.getI18nBySrv('completed') }} •
        {{ completedSteps }} {{ $srv.getI18nBySrv('finished') }} •
        {{ $srv.getI18nBySrv('total') }} {{ config.steps.length }}
      </div>
      <div class="progress-details-toggle" @click="toggleDetails">
        {{ $srv.getI18nBySrv(showDetails ? 'hide_details' : 'show_details') }}
        <Icon :type="showDetails ? 'ios-arrow-up' : 'ios-arrow-down'" />
      </div>
    </div>
    <div v-show="showDetails" class="step-list">
      <div v-for="(step, index) in config.steps" :key="index" class="step-item">
        <span class="step-name">{{ step.name }}</span>
        <Tag :color="getStatusColor(step.status)">{{
          $srv.getI18nBySrv(step.status)
        }}</Tag>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { T_srv, vue } from '@/services';
import { N_oProgressBar } from '@/types';

@T_srv.comp
export default class oProgress extends vue {
  @T_srv.prop({
    required: true
  })
  readonly config: N_oProgressBar.I_progressConf;

  /* 组件名 */
  private name: string = 'oProgress';

  /* 指挥部 */
  /* 遮罩 */
  public isMask: boolean = false;

  // private isShow: boolean = false;

  private showDetails = false;

  private autoClose: boolean = true;

  // private modelCf: N_oProgressBar.I_modelCf = new N_oProgressBar.T_modelCf();

  get progressColor(): string {
    if (this.config.percentage >= 100) return '#19be6b';
    if (this.config.percentage >= 75) return '#2d8cf0';
    if (this.config.percentage >= 50) return '#ff9900';
    return '#ed4014';
  }

  get progressStatus(): string {
    if (this.config.percentage >= 100) return 'success';
    if (this.config.percentage <= 0) return 'wrong';
    return 'active';
  }

  created() {
    // this.show();
    // if (this.autoClose && this.config.percentage >= 100) {
    //   this.close();
    // }
    this.init();
  }

  mounted() {}

  destroyed() {}

  private init() {
    // // 读取配置
    // const autoClose = this.config?.autoClose;
    // if (!Tsrv.utils.noValue(autoClose) && typeof autoClose === 'boolean') {
    //   this.autoClose = autoClose;
    // }
    // // modal配置
    // const modelCf = this.config.modelCf;
    // if (!Tsrv.noValue(modelCf?.title)) {
    //   this.modelCf.title = modelCf.title;
    // }
    // if (!Tsrv.noValue(modelCf?.size)) {
    //   this.modelCf.size = modelCf.size;
    // }
    // if (!Tsrv.noValue(modelCf?.mask)) {
    //   this.modelCf.mask = modelCf.mask;
    // }
    // if (!Tsrv.noValue(modelCf?.showFooter)) {
    //   this.modelCf.showFooter = modelCf.showFooter;
    // }
    // if (!Tsrv.noValue(modelCf?.tapClose)) {
    //   this.modelCf.tapClose = modelCf.tapClose;
    // }
  }

  private toggleDetails(): void {
    this.showDetails = !this.showDetails;
  }

  get completedSteps(): number {
    return this.config.steps.filter(step => step.status === 'success').length;
  }

  private getStatusColor(status: string): string {
    switch (status) {
      case 'success':
        return 'success';
      case 'error':
        return 'error';
      case 'processing':
        return 'primary';
      case 'waiting':
        return 'warning';
      default:
        return 'default';
    }
  }

  // public show() {
  //   this.isShow = true;
  // }

  // public hide() {
  //   this.isShow = false;
  // }

  // public confirm() {
  //   this.$bus.$emit(`modal_${this.id}`, true);
  //   this.hide();
  // }

  // public close() {
  //   this.$bus.$emit(`modal_${this.id}`, false);
  //   this.hide();
  // }

  /* 设置组件整体遮罩 */
  public setMask(p: boolean) {
    this.isMask = p;
  }

  public getMask(p: boolean): boolean {
    return this.isMask;
  }
}
</script>
<style lang="scss" scoped>
.ivu-progress-outer {
  border: 1px solid #e8eaec;
  border-radius: 4px;
  padding: 4px;
}

.progress-header {
  .progress-content {
    ::v-deep .ivu-progress-show-info .ivu-progress-outer {
      padding-right: 30px;
      margin-right: -30px;
    }
    ::v-deep .ivu-progress-inner-text {
      display: none;
    }
  }
  .progress-summary {
    font-size: 14px;
    color: #515a6e;
  }

  .progress-details-toggle {
    margin-top: 12px;
    color: #2d8cf0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;

    &:hover {
      text-decoration: underline;
    }
  }
}

.step-list {
  margin-top: 12px;
  max-height: 400px;
  min-height: 100px;
  overflow-y: auto;
  resize: vertical;
  border: 1px solid #e8eaec;
  border-radius: 4px;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;

  .step-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .step-name {
      flex: 1;
    }
  }
}
</style>
